<template>
    <div>
          <div id="maina"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";



//声明周期函数，自动执行初始化
onMounted(() => {
  init();
});
//初始化函数
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("maina"));
  // 绘制图表
  let optionsa = {
    tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        // { value: 1048, name: 'Search Engine' },
        // { value: 735, name: 'Direct' },
        // { value: 580, name: 'Email' },
        // { value: 484, name: 'Union Ads' },
        // { value: 300, name: 'Video Ads' }
        {value:7000},
        {value:2000}
      ]
    }
  ]
};

  // 渲染图表
  Chart.setOption(optionsa);
}
</script>

<style scoped>
#maina {
  width:50%;
  height: 100px;
  float: right;
  margin-top: -50px;
}
</style>